<template>
  <Head :time="state.today"></Head>
  <section class="banner-box">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      lazy-render
      indicator-color="white"
      v-if="state.bannerList.length > 0"
    >
      <van-swipe-item v-for="item in state.bannerList" :key="item.id">
        <router-link :to="`/detail/${item.id}`" class="content">
          <img :src="item.image" alt="" />
          <div class="mark">
            <h3 class="title">{{ item.title }}</h3>
            <span class="tip">{{ item.hint }}</span>
          </div>
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </section>
  <van-skeleton v-if="state.newsList.length === 0" title :row="5" />
  <div v-else>
    <section
      class="news-box"
      v-for="(item, index) in state.newsList"
      :key="index"
    >
      <van-divider content-position="left" v-if="index !== 0">{{
        formatTime(item.date, "{1}月{2}日")
      }}</van-divider>
      <div class="content">
        <Item
          v-for="item2 in item.stories"
          :key="item2.id"
          :data="item2"
        ></Item>
      </div>
    </section>
  </div>
  <div class="lazy-more" v-show="state.newsList.length !== 0" ref="loadMore">
    <van-loading size="14px">精彩数据准备中</van-loading>
  </div>
</template>
<script setup>
import Head from "../components/Head";
import { formatTime } from "../assets/utils";
import Item from "../components/Item.vue";
import api from "../api/index";
import { onBeforeMount, onMounted, reactive, ref } from "vue-demi";
let state = reactive({
  today: "",
  newsList: [],
  bannerList: [],
});
async function getData() {
  let { date, stories, top_stories } = await api.queryNewsLatest();
  state.today = date;
  state.newsList.push(
    Object.freeze({
      date,
      stories,
    })
  );
  state.bannerList = top_stories;
  console.log(state.newsList);
}
onBeforeMount(() => {
  getData();
});
let loadMore = ref(null);
onMounted(() => {
  let ob = new IntersectionObserver(async (changes) => {
    let item = changes[0];
    // console.log(changes);
    if (item.isIntersecting) {
      let result = await api.queryNewsBefor(
        state.newsList[state.newsList.length - 1]["date"]
      );
      state.newsList.push(Object.freeze(result));
    }
  });
  ob.observe(loadMore.value);
});
</script>

<style lang="less" scoped>
.banner-box {
  box-sizing: border-box;
  height: 375px;
  background-color: #d5d5d5;
  .van-swipe {
    height: 100%;
    background-color: #fff;

    .content {
      position: relative;
      display: block;
      height: 100%;
      color: #fff;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .mark {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px 20px;
        box-sizing: border-box;
        width: 100%;
        height: 110px;
        background: rgba(0, 0, 0, 0);
        background: -webkit-linear-gradient(
          top,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.5)
        );
        .title {
          font-size: 20px;
          max-height: 50px;
          line-height: 25px;
          overflow: hidden;
          padding-top: 20px;
        }
        .tip {
          font-size: 12px;
          line-height: 20px;
        }
      }
    }
    /deep/ .van-swipe__indicators {
      right: 15px;
      left: auto;
      transform: none;
      .van-swipe__indicator--active {
        width: 15px;
        border-radius: 3px;
        background: #fff;
      }
    }
  }
}
.news-box {
  padding: 0 15px;
  .van-divider {
    margin: 5px 0;
    font-size: 12px;
    &::before {
      display: none;
    }
  }
}
.van-skeleton {
  padding: 30px 15px;
}
.van-loading {
  display: flex;
  justify-content: center;
  padding: 10px 0px;
  background-color: #f4f4f4;
}
</style>
